<template>
    <el-table :data="props.tableData" style="width: 100%" v-loading="props.loading">
        <el-table-column v-for="columnItem in props.tableColumns" :prop="columnItem.prop" :label="columnItem.label"
            :width="columnItem.width" />
    </el-table>
    <el-pagination v-model:current-page="computedPageObj.page" v-model:page-size="computedPageObj.size"
        :total="computedPageObj.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
</template>
<script>
export default defineComponent({
    name: 'Table',
});
</script>
<script setup>

const props = defineProps({
    tableColumns: {
        type: Array,
        default: [],
    },
    tableData: {
        type: Array,
        default: [],
    },
    showPage: {
        type: Boolean,
        default: false,
    },
    pageObj: {
        type: Object,
        default: {}
    },
    loading: {
        type: Boolean,
        default: false,
    }
})
const emits = defineEmits(['changePage'])

console.log(props.tableColumns)
const computedPageObj = computed(() => {
    if (props.pageObj) return props.pageObj;
    else return { page: 1, size: 10, total: 0 };
});

// 修改每页条数
const handleSizeChange = () => {
    emits('changePage', computedPageObj.value.page, computedPageObj.value.size)
}
// 修改当前页
const handleCurrentChange = () => {
    emits('changePage', computedPageObj.value.page, computedPageObj.value.size)
}

</script>
<style lang='less' scoped>
</style>
